{% extends 'layout/basic.html' %}
{% load static %}

{% block title %} 用户登录 {% endblock %}

{% block css %}
    <link rel="stylesheet" href="{% static 'css/account.css' %}">
{% endblock %}

{% block content %}
    <div class="container account">
        <h3>用户登录</h3>
        <form id="loginSms" action="{% url "login" %}" method="post">
            {% csrf_token %}
            {% for feild in form %}
                {% if feild.name != 'code' %}
                <div class="form-group">
                    <label for="{{ feild.id_for_label }}">{{ feild.label }}</label>
                    {{ feild }}
                    <span class="error-msg">{{ feild.errors.0 }}</span>
                </div>
                {% else %}
                    <div class="form-group">
                    <label for="{{ feild.id_for_label }}">{{ feild.label }}</label>
                    <div class="clearfix">
                        <div class="col-md-6" style="padding-left: 0">
                            {{ feild }}
                            <span class="error-msg">{{ feild.errors.0 }}</span>
                        </div>
                        <div class="col-md-6">
                            <img src="{% url "image_code" %}" alt="" id="imageCode" title="点击更换验证码">
                        </div>
                    </div>
                </div>
                {% endif %}
            {% endfor %}
        <div>
            <div style="float: right; padding-top: 10px;"><a href="{% url 'login_sms' %}">短信验证码登录?</a></div>
        </div>
            <button type="submit" class="btn btn-primary" id="btmSubmit">登 录</button>
        </form>
    </div>

{% endblock %}

{% block js %}
    <script>
    $(function () {
        bindImageCode();
    });
    function bindImageCode() {
        $("#imageCode").click(function () {
            let oldSrc = $(this).attr('src');
            $(this).attr('src', oldSrc + "?");
        });
    }
    </script>

{% endblock %}